<template>
  <div>
    <div>
      使用默认icon
      <div class="flex">
        <m-trend>营业额</m-trend>
        <m-trend type="down">销售额</m-trend>
      </div>
    </div>

    <div>
      使用自定义icon 颜色反转
      <div class="flex">
        <m-trend
          :reverseIconColor="true"
          upIconName="CaretTop"
          text="营业额"
        ></m-trend>
        <m-trend :reverseIconColor="true" downIconName="CaretBottom" type="down"
          >销售额</m-trend
        >
      </div>
    </div>
    <div>
      icon使用自定义颜色
      <div class="flex">
        <m-trend
          upIconName="CaretTop"
          text="营业额"
          upIconColor="pink"
        ></m-trend>
        <m-trend downIconColor="blue" downIconName="CaretBottom" type="down"
          >销售额</m-trend
        >
      </div>
    </div>
    <div>
      text使用自定义的颜色
      <div class="flex">
        <m-trend
          upIconName="CaretTop"
          text="营业额"
          upIconColor="pink"
          upTextColor="#f5222d"
        ></m-trend>
        <m-trend
          downIconColor="blue"
          downIconName="CaretBottom"
          type="down"
          downTextColor="#00c087"
          >销售额</m-trend
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .trend-box {
    margin-right: 20px;
  }
}
</style>
